<template>
	<view>
		<view>数据绑定学习</view>
		<view>{{ msg }}</view>
		<view>{{ '世界' + '你好' }}</view>
		<view>{{ 1 + 1 }}</view>
		<view>{{ flag ? '真的[flag为true]' : '假的[flag为false]' }}</view>

		<view>========================</view>
		<view>数据绑定之v-bind</view>
		<image v-bind:src="imgUrl"></image>
		<image :src="imgUrl"></image>

		<view>========================</view>
		<view>数据绑定之v-for</view>
		<view v-for="(item, i) in arr" :key="item.id">序号： {{ i }}，ID：{{ item.id }}，姓名：{{ item.name }}，年龄：{{ item.age }}</view>

		<view>========================</view>
		<view>数据绑定之v-on</view>
		<button type="primary" v-on:click="clickHandle">按钮</button>
		<button type="primary" @click="clickHandle">按钮</button>
		<button type="primary" v-on:click="clickHandle1(20, $event)">按钮</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			msg: 'hello',
			flag: true,
			imgUrl: 'http://img0.imgtn.bdimg.com/it/u=2131671052,1266320948&fm=26&gp=0.jpg',
			arr: [
				{
					name: '张三',
					age: 18,
					id: 1
				},
				{
					name: '李四',
					age: 22,
					id: 2
				},
				{
					name: '王二',
					age: 20,
					id: 3
				}
			]
		};
	},
	methods: {
		clickHandle(e) {
			// e表示该事件的事件对象
			console.log('被点击了', e);
		},
		clickHandle1(num, e) {
			console.log('被点击了', num, e);
		}
	}
};
</script>

<style></style>
